<template>
	<div>
		<el-form
			ref="crmForm"
			:model="formData"
			label-width="135px"
			:rules="CrmRules"
			label-position="top">
			<!-- 关联客户 -->
			<el-col :span="22" v-if="!id">
				<el-form-item label="关联客户" prop="customer_id">
					<crm-relative-cell
						:value="relationInfoLead.value"
						:index="0"
						:item="relationInfoLead"
						crm-type="customer"
						:radio="true"
						:disabled="relationInfoLead.disabled"
						@value-change="fieldValueChange"/>
				</el-form-item>
			</el-col>
			
			<!-- 基础信息 -->
			<el-col
				v-for="(item,index) in FieldList.a"
				:key="index"
				:span="(item.form_type == 'textarea' || item.form_type == 'file') ? 22 : 11">
				<el-form-item
					:label="item.name" 
					:prop="item.field">
					<!-- 选项框 -->
					<table-form-item ref="base" :item="item" :form-data="formData" :crm-type="crmType"/>	
				</el-form-item>
			</el-col>
			
			
			<!-- 财务信息 -->
			<el-col :span="22" style="margin-top: 35px;" v-if="FieldList.e && FieldList.e.length > 0">
				<div class="card-base">已收款</div>
				<el-divider></el-divider>
			</el-col>
			<div v-for="(item,index) in caiwu_info">
				<el-col
					v-for="(i,k) in FieldList.e"
					:span="(i.form_type == 'textarea' || i.form_type == 'file') ? 22 : 11">
					<el-form-item
						:label="i.name" 
						:prop="i.field">
						<!-- 选项框 -->
						<table-form-item 
							:item="i" 
							:form-data="item"
							:crm-type="crmType"/>	
					</el-form-item>
				</el-col>
				<el-col :span="22" v-if="index > 0">
					 <el-button type="danger" plain @click="del_caiwu(index)">删除</el-button>
				</el-col>
				<el-col :span="22">
					<el-divider></el-divider>
				</el-col>
			</div>
			<el-col :span="22"  v-if="FieldList.e && FieldList.e.length > 0">
				<el-link icon="el-icon-plus" type="primary" @click="add_caiwu">新增一条收款信息</el-link>  
			</el-col>
			
			<!-- 未收款 -->
			<el-col :span="22" style="margin-top: 35px;" v-if="FieldList.noe && FieldList.noe.length > 0">
				<div class="card-base">未收款</div>
				<el-divider></el-divider>
			</el-col>
			<el-col :span="22" >
				<el-form-item label="是否有未收款" prop="no_finance">
					<el-select
						v-model="formData['no_finance']" 
						filterable 
						placeholder="请选择"
						class="forminput"
						@change="changeNoFinance">
						<el-option label="有" value="有"></el-option>
						<el-option label="无" value="无"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
				<!-- 显示未收款 -->
				<div 
					v-if="formData['no_finance'] == '有'"
					v-for="(item,index) in nocaiwu_info" >
					<el-col
						v-for="(i,k) in FieldList.noe"
						:span="(i.form_type == 'textarea' || i.form_type == 'file') ? 22 : 11">
						<el-form-item
							:label="i.name" 
							:prop="i.field">
							<!-- 选项框 -->
							<table-form-item 
								:item="i" 
								:form-data="item"
								:crm-type="crmType"/>	
						</el-form-item>
					</el-col>
					<el-col :span="22" v-if="index > 0">
						 <el-button type="danger" plain @click="del_caiwu(index)">删除</el-button>
					</el-col>
					<el-col :span="22">
						<el-divider></el-divider>
					</el-col>
				</div>
				<el-col :span="22"  v-if="FieldList.noe && FieldList.noe.length > 0 && formData['no_finance'] == '有'">
					<el-link icon="el-icon-plus" type="primary" @click="add_nocaiwu">新增一条未收款信息</el-link>  
				</el-col>
				<!-- 显示未收款 -->
			<!-- 未收款 -->
		</el-form>
	</div>
</template>

<script>
	import { XhUserCell } from '@/components/user'
	import { mapGetters } from 'vuex'
	import TableFormItem from '@/components/FromData/TableFormItem'
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	export default {
		computed: {
			...mapGetters(['userInfo'])
		},
		components: {
			TableFormItem,
			CrmRelativeCell
		},
		props:{
			id:{
				type:[String,Number],
				default:''
			},
			FieldList:{
				type:[Object,Array],
				default:()=>{
					return {}
				}
			},
			CrmRules:{
				type:Object,
				default:()=>{}
			},
			formData:{
				type:Object,
				default:()=>{}
			},
			crmType:{
				type:String,
				default:''
			},
			action:{
				type:String,
				default:''
			},
			relevant:{
				type:String,
				default:''
			},
		},
		data(){
			return{
				userArr:{
					user_owner_user_id:[]
				},
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
				// 关联意向客户
				relationInfoLead:{
					default_value:"",
					form_type:'customer',
					name:"",
					types:"",
					value:[],
					disabled:false,
					actiontype:7
				},
				// 财务信息
				caiwu_info:[],
				caiwu_obj:{},
				
				// 未收款
				nocaiwu_info:[],
				nocaiwu_obj:{},
			}
		},
		watch: {
			crmType: function(value) {
				if(this.formData['dialog_'+value]){
					this.relationInfo.value = this.formData['dialog_'+value]
				}else{
					this.relationInfo.value = []
				}
			},
			
			FieldList: function(value) {
				let obj_f = {}
				let obj_nof = {}
				let f = (value && value.e) ? value.e : []
				let nof = (value && value.noe) ? value.noe : []
				// 财务信息
				for (var i = 0; i < f.length; i++) {
					obj_f[f[i]["field"]] = ""
				}
				this.caiwu_info.push(obj_f)
				this.caiwu_obj = JSON.parse(JSON.stringify(obj_f))
				
				// 未收款
				for (var i = 0; i < nof.length; i++) {
					obj_nof[nof[i]["field"]] = ""
				}
				this.nocaiwu_info.push(obj_nof)
				this.nocaiwu_obj = JSON.parse(JSON.stringify(obj_nof))
			},
		},
		mounted() {
			if(this.formData['dialog_'+this.crmType]){
				this.relationInfo.value = this.formData['dialog_'+this.crmType]
			}
		},
		methods:{
			validateForm() {
				let flag = false
				this.$refs['crmForm'].validate((valid) => {
					if(!valid){
						flag = false
					}else{
						flag = true
					}
				})
				let formData = this.formData
				// 财务信息
				formData["caiwu_info"] = this.caiwu_info
				// 未收款
				if(this.nocaiwu_info.length > 0){
					formData["nocaiwu_info"] = this.nocaiwu_info
				}
				// 案件类型
				formData["type"] = this.relevant
				if(this.id){
					formData["customer_id"] = this.id
				}
				
				return {
					flag:flag,
					data:formData
				}
			},
			
			// 新增财务信息
			add_caiwu(){
				this.caiwu_info.push(this.caiwu_obj)
			},
			// 删除一条财务信息
			del_caiwu(index){
				this.caiwu_info.splice(index, 1)
			},
			
			// 未收款
			add_nocaiwu(){
				this.nocaiwu_info.push(this.nocaiwu_obj)
			},
			// 删除
			del_caiwu(index){
				this.nocaiwu_info.splice(index, 1)
			},
			changeNoFinance(value){
				if(value == "无"){
					this.nocaiwu_info.map((item)=>{
						item.nofinance_money = ''
						item.nofinance_detail = ''
					})
				}
			},
			
			// 关联客户
			fieldValueChange(data) {
				if(!data.value.length) return
				this.$set(this.formData,"customer_id",data.value[0].id)
				this.$set(this.formData,"customer_name",data.value[0].name)
			},
		}
	}
</script>

<style scoped="scoped">
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		min-height: 40px !important;
		line-height: 40px !important;
		padding: 0 15px !important;
	}
	
	.el-col-11 {
	    /* height: 100px; */
	}
	
	.datecss /deep/ .el-input__inner {
	    padding: 0 15px 0 25px !important;
	}
	.card-base{
		border-left: 5px solid #3A8EE6;
		height: 15px;
		padding-left: 10px;
		margin:0 0 20px 0
	}
</style>
